<template>
  <view class="club-multi-selector">
    <view class="selector-display" @click="toggleSelector">
      <text class="display-text">{{ displayText }}</text>
      <text class="arrow">▼</text>
    </view>
    
    <view class="selector-dropdown" v-if="showSelector">
      <view class="selector-option" 
            v-for="(option, index) in options" 
            :key="index" 
            @click="toggleOption(index)"
            :class="{ selected: selectedIndices.includes(index) }">
        <text>{{ option }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ClubMultiSelector',
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showSelector: false,
      selectedIndices: [...this.value]
    };
  },
  computed: {
    displayText() {
      if (this.selectedIndices.length === 0 || (this.selectedIndices.length === 1 && this.selectedIndices[0] === 0)) {
        return '所有俱乐部';
      } else {
        // 过滤掉"所有俱乐部"选项（索引为0）
        const filteredIndices = this.selectedIndices.filter(index => index !== 0);
        const selectedNames = filteredIndices.map(index => this.options[index]);
        return selectedNames.join(', ') || '所有俱乐部';
      }
    }
  },
  methods: {
    toggleSelector() {
      this.showSelector = !this.showSelector;
    },
    
    toggleOption(index) {
      const selectedIndex = this.selectedIndices.indexOf(index);
      
      if (selectedIndex > -1) {
        // 如果已选中，则移除
        this.selectedIndices.splice(selectedIndex, 1);
      } else {
        // 如果未选中，则添加
        this.selectedIndices.push(index);
      }
      
      // 如果选择了"所有俱乐部"（索引为0），则清空其他选择
      if (index === 0) {
        this.selectedIndices = [0];
      } else {
        // 如果选择了其他选项，则移除"所有俱乐部"选项
        const allClubIndex = this.selectedIndices.indexOf(0);
        if (allClubIndex > -1) {
          this.selectedIndices.splice(allClubIndex, 1);
        }
      }
      
      // 触发input事件，传递选中的索引数组
      this.$emit('input', this.selectedIndices);
      
      // 触发change事件，传递详细信息
      this.$emit('change', {
        detail: {
          value: this.selectedIndices
        }
      });
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.selectedIndices = [...newVal];
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.club-multi-selector {
  position: relative;
  width: 109px;
}

.selector-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 160rpx;
  background-color: #fff;
}

.display-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
      display: inline-block;
    max-width: 567rpx;
}

.arrow {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.selector-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1rpx solid #ccc;
  border-top: none;
  border-radius: 0 0 8rpx 8rpx;
  max-height: 300rpx;
  overflow-y: auto;
  z-index: 999;
}

.selector-option {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
  color: #333;
}

.selector-option:last-child {
  border-bottom: none;
}

.selector-option.selected {
  background-color: #f0f8ff;
  color: #1e90ff;
  font-weight: bold;
}
</style>